<template>
  <div class="register">
    <header-v></header-v>
    <Content>
      <Row
        class="bg"
        type="flex"
        align="middle"
        style="height:750px;"
      >
        <Col
          :lg="{span:7,offset:14}"
          :xs="{span:24}"
        >
        <Card :bordered="false">
          <img
            slot="title"
            src="../../assets/headerLogin_log.png"
            alt=""
            srcset=""
          >
          <p
            style="text-align:left"
            slot="title"
          >账号注册</p>
          <Form
            ref="formItem"
            :model="formItem"
            :rules="ruleInline"
          >
            <FormItem prop="userName">
              <Input
                type="text"
                v-model="formItem.userName"
                placeholder="请输入账号"
              >
              <Icon
                type="ios-person-outline"
                slot="prepend"
              ></Icon>
              </Input>
            </FormItem>
            <FormItem prop="passWord">
              <Input
                type="password"
                v-model="formItem.passWord"
                placeholder="请输入密码"
              >
              <Icon
                type="ios-lock-outline"
                slot="prepend"
              ></Icon>
              </Input>
            </FormItem>
            <FormItem>
              <Row>
                <Col span="12">
                <CheckboxGroup v-model="formItem.checkbox">
                  <Checkbox label="记住密码"></Checkbox>
                </CheckboxGroup>
                </Col>
                <Col
                  span="12"
                  style="text-align:right"
                >
                <span
                  style="cursor:pointer"
                  @click="toForget"
                > 忘记密码</span>
                </Col>
              </Row>
            </FormItem>
            <FormItem>
              <Button
                type="primary"
                long
                @click="handleSubmit('formItem')"
              >注册</Button>
            </FormItem>
          </Form>
        </Card>
        </Col>
      </Row>
    </Content>
    <footer-v></footer-v>
  </div>
</template>

<script>
import HeaderV from '../../components/login/main_header'
import FooterV from '../../components/login/main_footer'
export default {
  components: {
    HeaderV,
    FooterV
  },
  data() {
    return {
      formItem: {
        userName: "",
        passWord: "",
        checkbox: []
      },
      ruleInline: {
        userName: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur"
          }
        ],
        passWord: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          },
          {
            type: "string",
            min: 6,
            message: "密码长度不能小于6位",
            trigger: "blur"
          }
        ]
      }
    }
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$axios.post('/user/register', this.formItem).then((res) => {
            this.$Message.success(res.data.msg);
            if (res.data.code == 200) {
              this.$router.push({
                name: 'login'
              }, 2000)
            }
          })
        } else {
          this.$Message.error("输入有误");
        }
      });
    },
    toForget() {
      this.$router.push({
        name: "forget"
      })
    }
  }
}
</script>

<style scoped>
.bg {
  background: url("../../assets/contentLogin.jpg") no-repeat center;
  background-size: 100% 100%;
}
</style>